<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>有奖竞答详情</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #FF5A5F;
            --secondary: #7B61FF;
            --success: #00B42A;
            --warning: #FF7D00;
            --danger: #F53F3F;
            --text-primary: #1D2129;
            --text-secondary: #4E5969;
            --text-tertiary: #86909C;
            --bg-light: #F7F8FA;
            --bg-white: #FFFFFF;
            --border-light: #E5E6EB;
            --radius: 12px;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid var(--border-light);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 20px;
        }
        
        /* 竞答详情容器 */
        .quiz-detail-container {
            background-color: var(--bg-white);
            margin-bottom: 12px;
        }
        
        /* 竞答头部 */
        .quiz-header {
            padding: 16px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .quiz-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            border: 1px solid var(--border-light);
        }
        
        .quiz-creator {
            flex: 1;
        }
        
        .creator-name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .creator-badge {
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 4px;
            background-color: var(--secondary);
            color: white;
        }
        
        .quiz-meta {
            font-size: 12px;
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 6px;
        }
        
        .quiz-status {
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-active {
            background-color: rgba(0, 180, 42, 0.1);
            color: var(--success);
        }
        
        .status-ending {
            background-color: rgba(255, 125, 0, 0.1);
            color: var(--warning);
        }
        
        .status-ended {
            background-color: rgba(134, 144, 156, 0.1);
            color: var(--text-tertiary);
        }
        
        /* 竞答内容 */
        .quiz-content {
            padding: 16px;
        }
        
        .quiz-title {
            font-size: 20px;
            font-weight: 600;
            line-height: 1.5;
            margin-bottom: 16px;
        }
        
        /* 无图竞答 */
        .quiz-no-image .quiz-content {
            padding-bottom: 16px;
        }
        
        /* 单图竞答 */
        .quiz-single-image .quiz-image {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 16px;
        }
        
        .quiz-single-image .quiz-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* 多图竞答布局 */
        .quiz-multi-image.two-images .quiz-images {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 16px;
        }
        
        .quiz-multi-image.three-images .quiz-images {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 16px;
        }
        
        .quiz-multi-image.three-images .quiz-images div:nth-child(3) {
            grid-column: 1 / 3;
        }
        
        .quiz-multi-image .quiz-image {
            aspect-ratio: 1/1;
            overflow: hidden;
            position: relative;
        }
        
        .quiz-multi-image .quiz-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 奖励信息 */
        .quiz-reward {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
            padding: 12px 16px;
            background-color: rgba(123, 97, 255, 0.05);
            border-radius: 8px;
            border-left: 3px solid var(--secondary);
        }
        
        .reward-icon {
            color: var(--secondary);
            font-size: 22px;
        }
        
        .reward-text {
            font-size: 16px;
            font-weight: 500;
            color: var(--secondary);
        }
        
        /* 问题描述 */
        .quiz-description {
            font-size: 16px;
            color: var(--text-primary);
            margin-bottom: 16px;
            line-height: 1.6;
        }
        
        /* 竞答信息 */
        .quiz-info {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 16px;
            font-size: 14px;
        }
        
        .quiz-info-item {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--text-secondary);
        }
        
        /* 倒计时样式 */
        .countdown {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--warning);
            font-size: 15px;
            font-weight: 500;
            padding: 10px 16px;
            background-color: rgba(255, 125, 0, 0.05);
            border-radius: 8px;
            margin-bottom: 16px;
        }
        
        /* 参与按钮区域 */
        .quiz-actions {
            padding: 16px;
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
            display: flex;
            gap: 12px;
        }
        
        .main-action-btn {
            flex: 2;
            padding: 12px 0;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .secondary-action-btn {
            flex: 1;
            padding: 12px 0;
            background-color: var(--bg-light);
            color: var(--text-secondary);
            border: 1px solid var(--border-light);
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        /* 分享菜单 */
        .share-menu {
            position: fixed;
            bottom: -300px;
            left: 0;
            right: 0;
            background-color: var(--bg-white);
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            padding: 20px 16px 16px;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1001;
            transition: bottom 0.3s ease;
        }
        
        .share-menu.show {
            bottom: 0;
        }
        
        .share-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 16px;
            text-align: center;
        }
        
        .share-options {
            display: flex;
            justify-content: space-around;
            margin-bottom: 24px;
        }
        
        .share-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            color: var(--text-secondary);
            font-size: 12px;
        }
        
        .share-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--bg-light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        
        .cancel-share {
            width: 100%;
            padding: 12px;
            background-color: var(--bg-light);
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
        }
        
        /* 遮罩层 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        
        .overlay.show {
            opacity: 1;
            pointer-events: auto;
        }
        
        /* 标签 */
        .quiz-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .quiz-tag {
            padding: 4px 12px;
            background-color: var(--bg-light);
            border-radius: 16px;
            font-size: 13px;
            color: var(--text-secondary);
        }
        
        /* 题目预览 */
        .questions-preview {
            padding: 16px;
            background-color: var(--bg-light);
            border-radius: 8px;
            margin-bottom: 16px;
        }
        
        .preview-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .question-item {
            font-size: 15px;
            margin-bottom: 12px;
            padding-left: 20px;
            position: relative;
        }
        
        .question-item::before {
            content: "1.";
            position: absolute;
            left: 0;
            font-weight: 600;
            color: var(--primary);
        }
        
        .question-item:nth-child(2)::before { content: "2."; }
        .question-item:nth-child(3)::before { content: "3."; }
        
        .show-more-questions {
            font-size: 14px;
            color: var(--secondary);
            background: none;
            border: none;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        /* 留言区 */
        .comments-section {
            background-color: var(--bg-white);
            padding: 16px;
            margin-bottom: 12px;
        }
        
        .comments-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .comments-title {
            font-size: 16px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .comments-count {
            color: var(--text-tertiary);
            font-size: 14px;
            margin-left: 8px;
        }
        
        .sort-comments {
            font-size: 14px;
            color: var(--text-secondary);
            background: none;
            border: none;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        /* 留言输入框 */
        .comment-input-container {
            display: flex;
            gap: 12px;
            margin-bottom: 24px;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .comment-input-wrapper {
            flex: 1;
        }
        
        .comment-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-light);
            border-radius: 20px;
            background-color: var(--bg-light);
            font-size: 14px;
            outline: none;
            resize: none;
            height: 80px;
        }
        
        .comment-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 8px;
        }
        
        .comment-btn {
            padding: 6px 16px;
            border-radius: 16px;
            font-size: 14px;
            font-weight: 500;
            border: none;
        }
        
        .cancel-comment {
            background-color: var(--bg-light);
            color: var(--text-secondary);
        }
        
        .send-comment {
            background-color: var(--primary);
            color: white;
        }
        
        /* 留言列表 */
        .comments-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .comment-item {
            display: flex;
            gap: 12px;
        }
        
        .comment-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .comment-content {
            flex: 1;
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
        }
        
        .comment-author {
            font-size: 14px;
            font-weight: 600;
        }
        
        .comment-time {
            font-size: 12px;
            color: var(--text-tertiary);
        }
        
        .comment-text {
            font-size: 15px;
            margin-bottom: 8px;
            line-height: 1.5;
        }
        
        .comment-actions {
            display: flex;
            gap: 16px;
            font-size: 13px;
        }
        
        .comment-action {
            display: flex;
            align-items: center;
            gap: 4px;
            color: var(--text-tertiary);
            background: none;
            border: none;
        }
        
        .comment-action.liked {
            color: var(--primary);
        }
        
        /* 回复区域 */
        .replies {
            margin-top: 12px;
            padding-left: 16px;
            border-left: 2px solid var(--border-light);
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .reply-item {
            display: flex;
            gap: 8px;
        }
        
        .reply-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .reply-content {
            flex: 1;
            background-color: var(--bg-light);
            padding: 8px 12px;
            border-radius: 8px;
        }
        
        .reply-header {
            display: flex;
            gap: 8px;
            margin-bottom: 4px;
        }
        
        .reply-author {
            font-size: 13px;
            font-weight: 600;
        }
        
        .reply-to {
            font-size: 13px;
            color: var(--text-tertiary);
        }
        
        .reply-text {
            font-size: 14px;
            margin-bottom: 6px;
        }
        
        .reply-actions {
            display: flex;
            gap: 16px;
            font-size: 12px;
        }
        
        .reply-action {
            display: flex;
            align-items: center;
            gap: 4px;
            color: var(--text-tertiary);
            background: none;
            border: none;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 70px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 999;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            font-size: 11px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 22px;
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            z-index: 9999;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
        
        /* 参与记录 */
        .participation-section {
            background-color: var(--bg-white);
            padding: 16px;
        }
        
        .participation-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .participation-title {
            font-size: 16px;
            font-weight: 600;
        }
        
        .participants {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding-bottom: 8px;
        }
        
        .participant {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 60px;
        }
        
        .participant-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 6px;
            border: 2px solid transparent;
        }
        
        .participant-avatar.winner {
            border-color: var(--warning);
        }
        
        .participant-name {
            font-size: 12px;
            text-align: center;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">竞答详情</div>
        <button class="nav-btn" id="moreBtn">
            <i class="fas fa-ellipsis-v"></i>
        </button>
    </div>
    
    <!-- 竞答详情容器 -->
    <div class="quiz-detail-container quiz-multi-image two-images">
        <!-- 竞答头部 -->
        <div class="quiz-header">
            <img src="https://picsum.photos/id/91/100/100" alt="创建者头像" class="quiz-avatar">
            <div class="quiz-creator">
                <div class="creator-name">
                    美食探索家
                    <span class="creator-badge">官方认证</span>
                </div>
                <div class="quiz-meta">
                    <span><i class="fas fa-clock"></i> 发布于 3天前</span>
                    <span><i class="fas fa-eye"></i> 12.5k 浏览</span>
                </div>
                <span class="quiz-status status-active">进行中</span>
            </div>
        </div>
        
        <!-- 竞答内容 -->
        <div class="quiz-content">
            <div class="quiz-title">
                这两道菜肴分别属于哪个菜系？答对获得积分奖励！
            </div>
            
            <div class="quiz-images">
                <div class="quiz-image">
                    <img src="https://picsum.photos/id/292/600/600" alt="竞答图片1">
                </div>
                <div class="quiz-image">
                    <img src="https://picsum.photos/id/431/600/600" alt="竞答图片2">
                </div>
            </div>
            
            <div class="quiz-reward">
                <i class="fas fa-star reward-icon"></i>
                <span class="reward-text">奖励 500-2000 积分，可兑换美食券</span>
            </div>
            
            <div class="quiz-description">
                图中展示了两道经典中国菜肴，请分别说出它们所属的菜系。完全答对者将获得2000积分，答对一道获得500积分。积分可兑换各大餐厅美食券！
                <br><br>
                竞答规则：
                1. 每人仅限参与一次
                2. 需准确说出两道菜的菜系名称
                3. 答题时间限制为5分钟
                4. 答案提交后不可修改
            </div>
            
            <div class="quiz-tags">
                <span class="quiz-tag">美食</span>
                <span class="quiz-tag">中餐</span>
                <span class="quiz-tag">菜系</span>
                <span class="quiz-tag">积分奖励</span>
            </div>
            
            <div class="quiz-info">
                <div class="quiz-info-item">
                    <i class="far fa-question-circle"></i>
                    <span>2 道题目</span>
                </div>
                <div class="quiz-info-item">
                    <i class="far fa-user"></i>
                    <span>1,542 人参与</span>
                </div>
                <div class="quiz-info-item">
                    <i class="fas fa-trophy"></i>
                    <span>正确率 32%</span>
                </div>
                <div class="quiz-info-item">
                    <i class="far fa-clock"></i>
                    <span>5分钟 限时</span>
                </div>
            </div>
            
            <div class="countdown">
                <i class="fas fa-hourglass-half"></i>
                <span>竞答结束时间: 5天12小时</span>
            </div>
            
            <!-- 题目预览 -->
            <div class="questions-preview">
                <div class="preview-title">
                    <i class="fas fa-list"></i>
                    <span>题目预览</span>
                </div>
                <div class="question-item">
                    图一中的菜肴属于哪个菜系？
                </div>
                <div class="question-item">
                    图二中的菜肴属于哪个菜系？
                </div>
                <button class="show-more-questions">
                    <span>查看全部题目</span>
                    <i class="fas fa-chevron-down"></i>
                </button>
            </div>
        </div>
        
        <!-- 参与按钮区域 -->
        <div class="quiz-actions">
            <button class="main-action-btn" id="joinBtn">
                <i class="fas fa-pencil-alt"></i>
                <span>立即参与</span>
            </button>
            <button class="secondary-action-btn" id="favoriteBtn">
                <i class="far fa-heart"></i>
            </button>
            <button class="secondary-action-btn" id="shareBtn">
                <i class="fas fa-share-alt"></i>
            </button>
        </div>
    </div>
    
    <!-- 参与记录 -->
    <div class="participation-section">
        <div class="participation-header">
            <div class="participation-title">参与情况</div>
            <button class="sort-comments">
                <span>查看全部</span>
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
        <div class="participants">
            <div class="participant">
                <img src="https://picsum.photos/id/64/100/100" alt="参与者" class="participant-avatar winner">
                <span class="participant-name">李小厨</span>
            </div>
            <div class="participant">
                <img src="https://picsum.photos/id/65/100/100" alt="参与者" class="participant-avatar winner">
                <span class="participant-name">王美食家</span>
            </div>
            <div class="participant">
                <img src="https://picsum.photos/id/66/100/100" alt="参与者" class="participant-avatar winner">
                <span class="participant-name">张吃货</span>
            </div>
            <div class="participant">
                <img src="https://picsum.photos/id/67/100/100" alt="参与者" class="participant-avatar">
                <span class="participant-name">刘大厨</span>
            </div>
            <div class="participant">
                <img src="https://picsum.photos/id/68/100/100" alt="参与者" class="participant-avatar">
                <span class="participant-name">陈美味</span>
            </div>
            <div class="participant">
                <img src="https://picsum.photos/id/69/100/100" alt="参与者" class="participant-avatar">
                <span class="participant-name">赵品尝</span>
            </div>
        </div>
    </div>
    
    <!-- 留言区 -->
    <div class="comments-section">
        <div class="comments-header">
            <div class="comments-title">
                <i class="far fa-comment"></i>
                <span>讨论区</span>
                <span class="comments-count">(328)</span>
            </div>
            <button class="sort-comments">
                <span>最新</span>
                <i class="fas fa-chevron-down"></i>
            </button>
        </div>
        
        <!-- 留言输入框 -->
        <div class="comment-input-container">
            <img src="https://picsum.photos/id/22/100/100" alt="用户头像" class="user-avatar">
            <div class="comment-input-wrapper">
                <textarea class="comment-input" placeholder="分享你的想法..."></textarea>
                <div class="comment-actions">
                    <button class="comment-btn cancel-comment">取消</button>
                    <button class="comment-btn send-comment">发布</button>
                </div>
            </div>
        </div>
        
        <!-- 留言列表 -->
        <div class="comments-list">
            <!-- 留言1 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <span class="comment-author">李小厨</span>
                        <span class="comment-time">2小时前</span>
                    </div>
                    <div class="comment-text">
                        图一看起来像是粤菜，做工很精细，色泽也很符合粤菜的特点。图二可能是川菜，因为看起来比较麻辣，你们觉得呢？
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action liked">
                            <i class="far fa-heart"></i>
                            <span>42</span>
                        </button>
                        <button class="comment-action">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </button>
                    </div>
                    
                    <!-- 回复区域 -->
                    <div class="replies">
                        <div class="reply-item">
                            <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="reply-avatar">
                            <div class="reply-content">
                                <div class="reply-header">
                                    <span class="reply-author">王美食家</span>
                                    <span class="reply-to">回复 李小厨</span>
                                </div>
                                <div class="reply-text">
                                    我同意你的看法，图一确实是粤菜，应该是清蒸鱼之类的菜式。
                                </div>
                                <div class="reply-actions">
                                    <button class="reply-action">
                                        <i class="far fa-heart"></i>
                                        <span>8</span>
                                    </button>
                                    <button class="reply-action">
                                        <i class="far fa-comment"></i>
                                        <span>回复</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 留言2 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/66/100/100" alt="用户头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <span class="comment-author">张吃货</span>
                        <span class="comment-time">5小时前</span>
                    </div>
                    <div class="comment-text">
                        图二绝对是川菜，看起来像是麻婆豆腐，我最爱吃的菜之一！图一可能是苏菜或者浙菜？
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action">
                            <i class="far fa-heart"></i>
                            <span>27</span>
                        </button>
                        <button class="comment-action">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 留言3 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <span class="comment-author">美食探索家</span>
                        <span class="comment-time">昨天 14:30</span>
                    </div>
                    <div class="comment-text">
                        感谢大家的积极参与！提示一下，这两道菜分别来自中国的南方和西南地区，大家可以从烹饪手法和食材上再分析分析。
                    </div>
                    <div class="comment-actions">
                        <button class="comment-action">
                            <i class="far fa-heart"></i>
                            <span>89</span>
                        </button>
                        <button class="comment-action">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </button>
                    </div>
                    
                    <!-- 回复区域 -->
                    <div class="replies">
                        <div class="reply-item">
                            <img src="https://picsum.photos/id/67/100/100" alt="用户头像" class="reply-avatar">
                            <div class="reply-content">
                                <div class="reply-header">
                                    <span class="reply-author">刘大厨</span>
                                    <span class="reply-to">回复 美食探索家</span>
                                </div>
                                <div class="reply-text">
                                    南方地区的话，粤菜、闽菜、浙菜都有可能，西南地区应该就是川菜或湘菜了吧？
                                </div>
                                <div class="reply-actions">
                                    <button class="reply-action">
                                        <i class="far fa-heart"></i>
                                        <span>15</span>
                                    </button>
                                    <button class="reply-action">
                                        <i class="far fa-comment"></i>
                                        <span>回复</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 分享菜单 -->
    <div class="share-menu" id="shareMenu">
        <div class="share-title">分享到</div>
        <div class="share-options">
            <div class="share-option">
                <div class="share-icon" style="color: #07C160;">
                    <i class="fab fa-weixin"></i>
                </div>
                <span>微信好友</span>
            </div>
            <div class="share-option">
                <div class="share-icon" style="color: #07C160;">
                    <i class="fab fa-weixin"></i>
                </div>
                <span>朋友圈</span>
            </div>
            <div class="share-option">
                <div class="share-icon" style="color: #1296DB;">
                    <i class="fab fa-qq"></i>
                </div>
                <span>QQ好友</span>
            </div>
            <div class="share-option">
                <div class="share-icon" style="color: #E6162D;">
                    <i class="fab fa-weibo"></i>
                </div>
                <span>微博</span>
            </div>
            <div class="share-option">
                <div class="share-icon" style="color: #86909C;">
                    <i class="fas fa-link"></i>
                </div>
                <span>复制链接</span>
            </div>
        </div>
        <button class="cancel-share" id="cancelShareBtn">取消</button>
    </div>
    
    <!-- 遮罩层 -->
    <div class="overlay" id="overlay"></div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-trophy nav-icon"></i>
            <span>竞答</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass nav-icon"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById('backBtn');
        const moreBtn = document.getElementById('moreBtn');
        const joinBtn = document.getElementById('joinBtn');
        const favoriteBtn = document.getElementById('favoriteBtn');
        const shareBtn = document.getElementById('shareBtn');
        const shareMenu = document.getElementById('shareMenu');
        const cancelShareBtn = document.getElementById('cancelShareBtn');
        const overlay = document.getElementById('overlay');
        const toast = document.getElementById('toast');
        const showMoreQuestionsBtn = document.querySelector('.show-more-questions');
        const sendCommentBtn = document.querySelector('.send-comment');
        const cancelCommentBtn = document.querySelector('.cancel-comment');
        const commentInput = document.querySelector('.comment-input');
        const likeButtons = document.querySelectorAll('.comment-action, .reply-action');
        
        // 显示提示消息
        function showToast(message) {
            toast.textContent = message;
            toast.classList.add('show');
            
            clearTimeout(toast.timeout);
            toast.timeout = setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }
        
        // 切换分享菜单
        function toggleShareMenu(show) {
            if (show) {
                shareMenu.classList.add('show');
                overlay.classList.add('show');
            } else {
                shareMenu.classList.remove('show');
                overlay.classList.remove('show');
            }
        }
        
        // 绑定事件
        backBtn.addEventListener('click', () => showToast('返回竞答列表'));
        moreBtn.addEventListener('click', () => showToast('更多操作'));
        
        // 参与竞答
        joinBtn.addEventListener('click', () => showToast('进入答题页面'));
        
        // 收藏功能
        favoriteBtn.addEventListener('click', function() {
            const icon = this.querySelector('i');
            if (icon.classList.contains('far')) {
                icon.classList.remove('far');
                icon.classList.add('fas');
                this.style.color = 'var(--primary)';
                showToast('已收藏');
            } else {
                icon.classList.remove('fas');
                icon.classList.add('far');
                this.style.color = 'var(--text-secondary)';
                showToast('已取消收藏');
            }
        });
        
        // 分享功能
        shareBtn.addEventListener('click', () => toggleShareMenu(true));
        cancelShareBtn.addEventListener('click', () => toggleShareMenu(false));
        overlay.addEventListener('click', () => toggleShareMenu(false));
        
        // 查看更多题目
        showMoreQuestionsBtn.addEventListener('click', function() {
            const text = this.querySelector('span');
            const icon = this.querySelector('i');
            
            if (text.textContent === '查看全部题目') {
                text.textContent = '收起题目';
                icon.classList.remove('fa-chevron-down');
                icon.classList.add('fa-chevron-up');
                showToast('显示全部题目');
            } else {
                text.textContent = '查看全部题目';
                icon.classList.remove('fa-chevron-up');
                icon.classList.add('fa-chevron-down');
                showToast('收起题目');
            }
        });
        
        // 评论功能
        sendCommentBtn.addEventListener('click', function() {
            const text = commentInput.value.trim();
            if (text) {
                showToast('评论发布成功');
                commentInput.value = '';
            } else {
                showToast('请输入评论内容');
            }
        });
        
        cancelCommentBtn.addEventListener('click', function() {
            commentInput.value = '';
            showToast('已取消评论');
        });
        
        // 点赞功能
        likeButtons.forEach(button => {
            button.addEventListener('click', function() {
                const icon = this.querySelector('i');
                const countEl = this.querySelector('span');
                
                if (icon.classList.contains('far') && icon.classList.contains('heart')) {
                    // 点赞
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.classList.add('liked');
                    
                    // 更新计数
                    if (countEl) {
                        let count = parseInt(countEl.textContent);
                        countEl.textContent = count + 1;
                    }
                    
                    showToast('点赞成功');
                } else if (icon.classList.contains('fas') && icon.classList.contains('heart')) {
                    // 取消点赞
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.classList.remove('liked');
                    
                    // 更新计数
                    if (countEl) {
                        let count = parseInt(countEl.textContent);
                        countEl.textContent = count - 1;
                    }
                    
                    showToast('已取消点赞');
                } else if (icon.classList.contains('far') && icon.classList.contains('comment')) {
                    // 回复功能
                    showToast('回复功能待实现');
                }
            });
        });
        
        // 初始化
        function init() {
            // 初始隐藏分享菜单和遮罩
            toggleShareMenu(false);
        }
        
        init();
    </script>
</body>
</html>
